var app = new Vue({
    el:"#xxx",
    data:{
        base,
        // 页面中需要使用到的数据，键值对
        error_name: false,
        error_password: false,
        error_phone: false, //验证手机号
        error_sms_code: false, //短信验证码
        error_allow: false, //是否勾选
        error_name_message: '',
        error_phone_message: '',
        sms_code_tip: '获取短信验证码',
        error_sms_code_message: '',
        sending_flag: false, // 正在发送短信标志
        username: '',
        password: '',
        mobile: '',
        sms_code: '',
        allow: true,
        send_sms : '',

    },
    computed:{
        // 需要通过计算得到的数据，键值对 ，键是名称，值是匿名函数
    },
    mounted:function () {
        // 一加载就需要做的，直接是代码
    },
    methods:{
        // 需要用到的函数，键值对 ，键是名称，值是匿名函数

        // 校验用户名
        check_username: function (){
            var len = this.username.length;
            if(len<5||len>20) {
                alert("请输入5-20个字符的用户名")
                this.error_name = true;
            } else {
                this.error_name = false;
            }
        },

        // 校验密码
        check_pwd: function (){
            var len = this.password.length;
            if(len<8||len>16) {
                alert("请输入8-16个字符的用户名")
                this.error_password = true;
            } else {
                this.error_password = false ;
            }
        },
        // 校验手机号
        check_phone: function (){
            var re = /^1[345789]\d{9}$/;
            if(re.test(this.mobile)) {

            } else {
                alert("您输入的手机号格式不正确")
                this.error_phone = true;
            }

        },
        //检查短信验证码
        check_sms_code: function(){
            if(!this.sms_code){
               alert('请填写短信验证码')
            }
        },
         //检查是否勾选
        check_allow: function(){
            if(!this.allow) {
                this.error_allow = true;
            } else {
                this.error_allow = false;
            }
        },
        // 发送短信验证码
        send_sms_code: function(){

            // 校验参数，保证输入框有数据填写
            this.check_username();
            this.check_phone();
            if (this.error_phone ==false && this.error_name == false) {
                // 向后端接口发送请求，让后端发送短信验证码
                axios.get(this.base + '/sms_codes/' + this.mobile , {
                        responseType: 'json'
                    })
                    .then(response => {
                        alert("发送短信成功，收到短信后请输入6位数字验证码")
                    })
            }

        },
        // 注册
        on_submit: function() {
            this.check_username();
            this.check_pwd();
            this.check_phone();
            this.check_sms_code();
            this.check_allow();

            axios.post(this.base + '/users/', {
                username: this.username,
                password: this.password,
                mobile: this.mobile,
                sms_code: this.sms_code,
                allow: this.allow.toString()
            }, {
                responseType: 'json'
            })
            .then(response => {
                alert('注册成功')
                location.href = '/headline-logined.html'


            })

        }
        },

});



var aaa = new Vue({
    el:"#app",
    data:{
        // 页面中需要使用到的数据，键值对
        base,
        mobile: '',
        password: '',
        remember: false,
        user_id: '',
    },
    computed:{
        // 需要通过计算得到的数据，键值对 ，键是名称，值是匿名函数
    },
    mounted:function () {
        // 一加载就需要做的，直接是代码
        // alert(1)
    },
    methods:{
        // 校验手机格式
        check_mobile: function (mobile) {
            if(!(/^1[34578]\d{9}$/.test(mobile))){
                alert("手机号码有误，请重填");
            }else{
                return true
            }
        },
        // 校验密码
        check_password: function (password) {
            if(!password){
                alert("密码不能为空")
            }else {
                return true
            }
        },
        // 表单提交
        on_submit: function(){
            // alert(1)
            if (this.check_mobile(this.mobile) && this.check_password(this.password)) {
                axios.post(this.base+'/authorizations/', {
                        mobile: this.mobile,
                        password: this.password
                    }, {
                        responseType: 'json',
                        withCredentials: true
                    })
                    .then(response => {
                        // 使用浏览器本地存储保存token
                        // alert("登陆成功")
                        console.log(response.data)
                        if (this.remember) {
                            // 记住登录
                            sessionStorage.clear();

                            // 记录用户的登录状态
                            sessionStorage.clear();
                            localStorage.clear();
                            localStorage.token = response.data.token;
                            localStorage.username = response.data.username;
                            localStorage.user_id = response.data.id;
                        } else {
                            // 未记住登录
                            localStorage.clear();
                            console.log(response.data)
                            sessionStorage.token = response.data.token;
                            sessionStorage.user_id = response.data.id;
                            sessionStorage.username = response.data.username;
                        }
                        alert("登陆成功")
                        // 跳转页面
                        // location.href = '/headline-logined.html'
                        // location.href = '/person-myfile.html'
                        location.href = '/person-account.html'

                        // location.href = return_url;
                        // location.reload()
                    })
                    .catch(error => {
                        if (error.response.status == 400) {
                            alert("用户名或密码错误")
                            // this.error_pwd_message = '用户名或密码错误';
                        } else {
                            alert("服务器错误")
                            // this.error_pwd_message = '服务器错误';
                        }
                        // this.error_pwd = true;
                    })
            }
        },
    }
});



